<!-- 修改采购计划 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>修改采购计划</title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/element.min.css?1" />
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_nkr942sxu7.css" />
		<link rel="stylesheet" href="../css/reset.css?3123" />
        <link rel="stylesheet" href="../css/setlayui.css?12" />
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
	</head>
	<body>
		<div id="app" class="page-container" style="display: none" v-show="showApp">
			<div class="content_box">
				<div class="cell_box" style="width: 39.71vw">
					<div class="cell_title">
						<div class="cell_txt">基本信息:</div>
					</div>
					<div class="cell_cont">
						<!-- <div class="cell_item">
							<div class="cell_name">所属项目</div>
							<div class="cell_input">
								<el-input placeholder="请输入内容" disabled v-model="input" clearable> </el-input>
							</div>
						</div> -->
						<div class="cell_item" style="margin: 20px 0">
							<div class="cell_name must_input">计划标题</div>
							<div class="cell_input">
								<el-input placeholder="请输入内容" :disabled="titleDis" v-model="baseInfo.title" clearable> </el-input>
							</div>
						</div>
						<div class="cell_item">
							<div class="cell_name">备注</div>
							<div class="cell_input">
								<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="baseInfo.remark"> </el-input>
							</div>
						</div>
					</div>
				</div>
				<div class="cell_box" style="width: 50vw; float: right">
					<div class="cell_title">
						<div class="cell_txt">附件:</div>
						<div class="cell_but">
                            <el-upload
                                class="upload-demo"
                                action="##"
                                :show-file-list="false"
                                :http-request="httprequest"
                                multiple>
                                <el-button type="primary">上传附件</el-button>
                            </el-upload>
							
						</div>
					</div>
					<div class="cell_cont">
						<el-table :data="fileList" border height="100%" style="width: 100%">
							<el-table-column prop="filename" align="center" show-overflow-tooltip label="名称"></el-table-column>
							<el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人" min-width="80"></el-table-column>
                            <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间" width="144"></el-table-column>
                            <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="146">
                                <template slot-scope="scope">
                                    <el-button @click="prevew(scope.row)" type="text">查看</el-button>
                                    <el-button @click="downFile(scope.row)" type="text">下载</el-button>
                                    <el-button @click="remove(scope.row)" type="text">删除</el-button>
                                </template>
                            </el-table-column>
						</el-table>
					</div>
				</div>
				<div class="cell_box last_cell">
					<div class="cell_title">
						<div class="cell_txt">材料明细:</div>
						<div class="cell_but">
							<el-button class="cancelClass" @click="clAdd" type="primary">新增</el-button>
						</div>
					</div>
                    <div class="cell_cont" style="height: calc(100% - 42px)">
                        <el-table :data="clmxList" height="100%" border style="width: 100%">
							<el-table-column prop="materialName" align="center" show-overflow-tooltip label="名称"></el-table-column>
                            
                            <el-table-column prop="specificationName" align="center" show-overflow-tooltip label="规格"></el-table-column>
                            
                            <el-table-column prop="name" align="center" show-overflow-tooltip label="计划采购量" width="152">
                                <template slot-scope="scope">
                                    <div class="table_nums">
                                        <el-input-number :disabled="scope.row.status == 1" v-model="scope.row.purchaseQuantity" type="number" :min="1" label="描述文字"></el-input-number>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="unit" align="center" show-overflow-tooltip label="单位" width="70"></el-table-column>
                            
                            <el-table-column prop="date" align="center" show-overflow-tooltip label="使用部位" width="294">
                                <template slot-scope="scope">
                                    <div class="table_input">
                                        <el-input :disabled="scope.row.status == 1" placeholder="请输入内容" v-model="scope.row.useFor" clearable></el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="70">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.status != 1" @click="clmxRemove(scope.row)" type="text">删除</el-button>
                                </template>
                            </el-table-column>
						</el-table>
                    </div>
				</div>
			</div>
			<div class="but_box">
				<el-button @click="cancel" class="cancelClass">取消</el-button>
				<el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
            </div>
            <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
                <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
            </ul>
            <div class="hidden_box">
                <input id="clmxDataValue" value="" type="text">
            </div>
        </div>
        <script src="../js/FileSaver.js"></script>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer;
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        previewList: [],
                        titleDis:false,
                        projectId: '',
                        cgjhId: '',
                        baseInfo: {
                            title: '',
                            remark: ''
                        },
                        uploadFile: '',
						fileList: [],
                        clmxList: []
					};
				},
				methods: {
                    clmxRemove (row) {
                        var that = this
                        this.$confirm('此操作将删除此条数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            for (var i = 0; i < that.clmxList.length; i++) {
                                if (row.materialId == that.clmxList[i].materialId && row.specificationId == that.clmxList[i].specificationId) {
                                    that.clmxList.splice(i, 1)
                                }
                            }
                        }).catch(function () {
                        });
                    },
                    // 取消
                    cancel () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    // 提交
                    confirms () {
                        var that = this
                        var baseInfo = this.baseInfo
                        var fileList = this.fileList
                        var clmxList = this.clmxList
                        var fileArr = []
                        for (var i = 0; i < fileList.length; i++) {
                            fileArr.push(fileList[i].fileid + ',' + fileList[i].filename + ',' + fileList[i].userName + ',' + fileList[i].uploadTime)
                        }
                        if (baseInfo.title.length == 0) {
                            this.$message({
                                message: '请输入计划标题',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (clmxList.length == 0) {
                            this.$message({
                                message: '请至少添加一条材料明细',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var parmass = {}
                        parmass = baseInfo
                        parmass.planMatList = clmxList
                        parmass.uploadFile = fileArr.join('|')
                        console.log(JSON.stringify(parmass))
                        xLoading(true, '正在提交')
                        $.ajax({
                            type: 'post',
                            headers: {
			                    'Content-Type': 'application/json'
                            },
                            url: baseUrl + '/ConstructionPlan/EditBuyPlan',
                            data: JSON.stringify(parmass),
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: res.msg ? res.msg : '已提交',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                    parent.layer.close(index);
                                }, 100)
                            }
                        });
                    },
                    // 预览
                    prevew (row) {
                        if (getFileType(row.filename) == 'IMG') {
                            this.previewList = [row.fileurl];
                            setTimeout(function () {
                                var viewer = new Viewer(document.getElementById('jq22'), {
                                    hide: function () {
                                        viewer.destroy();
                                    }
                                });
                                viewer.show();
                            }, 10);
                            return false
                        }
                        if (getFileType(row.filename) == 'PDF') {
                            parent.layer.open({
                                type: 2,
                                title: 'pdf预览',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['98%', '98%'],
                                content: '/ApsPublic/pdf/web/viewer.html?file=' + encodeURIComponent(row.fileurl),
                                end: function () { }
                            });
                            return false
                        }
                        publicdownFile(row.filename, row.fileurl)
                    },
                    downFile (row) {
                        publicdownFile(row.filename, row.fileurl)
                    },
                    remove (row) {
                        var that = this
                        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            for (var i = 0; i < that.fileList.length; i++) {
                                if (row.fileid == that.fileList[i].fileid) {
                                    that.fileList.splice(i, 1)
                                }
                            }
                        }).catch(function () {
                        });
                    },
                    // 文件上传
                    httprequest (file) {
                        var that = this
                        xLoading(true, '正在上传')
                        var formData = new FormData();
						formData.append('files', file.file);
						$.ajax({
							type: 'post',
							url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
							data: formData,
							dataType: 'json',
							contentType: false,
							processData: false,
							success: function(res) {
                                xLoading(false)
								if (!res.success) {
									that.$message({
										message: res.msg,
										type: 'error'
									});
									return false;
                                }
                                that.fileList.push({
                                    fileid: res.data.fileId,
                                    filename: res.data.fileName,
                                    fileurl: res.data.ossUrl,
                                    uploadTime: res.data.uploadTime,
                                    userName: res.data.userName
                                })
							}
						});
                    },
                    // 材料新增
                    clAdd () {
                        var that = this
                        var selectArr = []
                        for (var i = 0; i < this.clmxList.length; i++) {
                            selectArr.push({
                                materialId: this.clmxList[i].materialId,
                                specificationId: this.clmxList[i].specificationId
                            })
                        }
                        parent.$('#publicValue').val('')
                        parent.layer.open({
                            type: 2,
                            title: '选择材料和规格',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['52.08%', '64.81%'],
                            // area: ['91.91%', '72.16%'],
                            content: '/ApsPublic/publicList/clmxList.html?projectId=' +  that.projectId +'&selectArr='+ encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                            end: function() {
                                setTimeout(function () {
                                    if (parent.$('#publicValue').val()) {
                                        var newList = JSON.parse(parent.$('#publicValue').val())
                                        for (var i = 0; i < newList.length; i++) {
                                            newList[i].purchaseQuantity = 1
                                            newList[i].useFor = ''
                                            newList[i].id = ''
                                        }
                                        that.clmxList = that.clmxList.concat(newList)
                                    }
                                }, 10)
                            }
                        });
                    },
                    // 获取详情数据
                    getCgjhDetail () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
			                    'Content-Type': 'application/json'
                            },
                            url: baseUrl + '/ConstructionPlan/GetBuyPlan',
                            data: JSON.stringify({
                                id: that.cgjhId
                            }),
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.baseInfo = {
                                    title: res.data.title,
                                    remark: res.data.remark,
                                    createTime: res.data.createTime,
                                    createUser: res.data.createUser,
                                    createUserName: res.data.createUserName,
                                    id: res.data.id,
                                    status: res.data.status,
                                    projectName: res.data.projectName,
                                    reviewedDate: res.data.reviewedDate
                                }
                                that.uploadFile = ''
                                if (res.data.uploadFile) {
                                    for (var i = 0; i < res.data.uploadFile.split('|').length; i++) {
                                        that.fileList.push({
                                            fileid: res.data.uploadFile.split('|')[i].split(',')[0],
                                            filename: res.data.uploadFile.split('|')[i].split(',')[1],
                                            fileurl: baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + res.data.uploadFile.split('|')[i].split(',')[0],
                                            uploadTime: res.data.uploadFile.split('|')[i].split(',')[3],
                                            userName: res.data.uploadFile.split('|')[i].split(',')[2],
                                        })
                                    }
                                }
                                that.clmxList = res.data.planMatList;
                                for(var i = 0;i< that.clmxList.length;i++){
                                    if(that.clmxList[i].status == 1){
                                        that.titleDis = true;
                                    }
                                }
                            }
                        });
                    }
                },
				mounted() {
					this.showApp = true;
                    this.projectId = getQuerys('projectId')
                    this.cgjhId = getQuerys('cgjhId')
                    this.getCgjhDetail()
				}
			});
		</script>
	</body>
	<style>
        .el-input.is-disabled .el-input__inner{
            color: #333 !important;
        }
		.but_box {
			display: flex;
			justify-content: center;
			height: 70px;
			padding-bottom: 20px;
			align-items: flex-end;
			background: #fafbfc;
			border-top: 1px solid #ebebeb;
		}
		.but_box .el-button {
			width: 120px;
			height: 32px;
			background: #5574d7;
			border-radius: 5px;
			padding: 0;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
		}

		.but_box .el-button--primary:focus,
		.but_box .el-button--primary:hover {
			background: rgba(85, 116, 215, 0.6);
			border-color: rgba(85, 116, 215, 0.6);
			color: #fff;
		}
		.but_box .el-button--primary.is-active,
		.but_box .el-button--primary:active {
			background: rgba(85, 116, 215, 0.8);
			border-color: rgba(85, 116, 215, 0.8);
			color: #fff;
		}
		.but_box .cancelClass {
			background: transparent;
			border: 1px solid #bbbbc5;
			color: #333333;
		}

		.but_box .cancelClass:focus,
		.but_box .cancelClass:hover {
			color: rgba(85, 116, 215, 1);
			border-color: rgba(85, 116, 215, 0.1);
			background-color: #ecf5ff;
		}
		.but_box .cancelClass:active {
			color: rgba(85, 116, 215, 0.8);
			border-color: rgba(85, 116, 215, 0.8);
			outline: none;
		}
		.cell_but {
			padding-left: 10px;
		}
		.cell_but .el-button {
			padding: 0 16px;
			height: 32px;
			background: transparent;
			border: 1px solid #5574d7;
			display: flex;
			border-radius: 5px;
			align-items: center;
			justify-content: center;
			color: #5574d7;
		}
		.cell_but .el-button:focus,
		.cell_but .el-button:hover {
			color: rgba(85, 116, 215, 1);
			border-color: rgba(85, 116, 215, 0.1);
			background-color: #ecf5ff;
		}
		.cell_but .el-button:active {
			color: rgba(85, 116, 215, 0.8);
			border-color: rgba(85, 116, 215, 0.8);
			outline: none;
		}
		.content_box {
			height: calc(100% - 70px);
			position: relative;
			width: 100%;
			padding: 3.09vh 3.67vw 0;
		}
		.cell_box {
			width: 100%;
			float: left;
		}
		.cell_title {
			height: 42px;
			display: flex;
			align-items: center;
			padding-bottom: 10px;
		}
		.cell_cont {
			height: 250px;
			border: 1px solid #ebebeb;
			padding: 3.09vh 3.67vw;
		}
		.last_cell {
			padding-top: 3.09vh;
			padding-bottom: 3.09vh;
			height: calc(100% - 292px);
		}
		.last_cell .cell_cont {
			height: auto;
			width: 100%;
		}
		.cell_item {
			display: flex;
		}
		.cell_name {
			width: 76px;
			text-align: right;
			line-height: 32px;
			padding-right: 10px;
		}
		.el-input__inner {
			height: 32px;
			border-radius: 5px;
			line-height: 32px;
		}
		.el-input__prefix,
		.el-input__suffix {
			line-height: 32px;
		}
		.cell_input .el-input__icon {
			line-height: 32px;
		}
		.cell_input {
			width: calc(100% - 76px);
		}
		.el-input.is-disabled .el-input__inner {
			background: #e3e3e3;
			border: 1px solid #bbbbc5;
		}

		.el-table th.gutter {
			display: table-cell !important;
		}
		.el-table th {
			background: #f8f8f8;
		}
		.el-table td,
		.el-table th {
			color: #333333;
			padding: 0;
			height: 32px;
		}
		.el-tooltip__popper.is-dark {
			background: #ffffff;
			color: #333333;
			box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
		}
		.el-tooltip__popper[x-placement^='top'] .popper__arrow::after {
			border-top-color: #ffffff;
		}
		.el-tooltip__popper[x-placement^='top'] .popper__arrow {
			border-top-color: #ffffff;
		}
		.el-table--border:after,
		.el-table--group:after,
		.el-table:before {
			background-color: #e2e2e2;
		}
		.el-table--border,
		.el-table--group {
			border-color: #e2e2e2;
		}
		.el-table td,
		.el-table th.is-leaf {
			border-bottom: 1px solid #e2e2e2;
		}

		.el-table--border th,
		.el-table--border th.gutter:last-of-type {
			border-bottom: 1px solid #e2e2e2;
		}
		.el-table--border td,
		.el-table--border th {
			border-right: 1px solid #e2e2e2;
        }
        .el-button--text {
            color: #5574D7;
        }
        .table_input .el-input__inner {
            height: 24px;
            text-align: center;
            border: none;
            line-height: 24px;
        }
        .table_input .el-input__prefix,
		.table_input .el-input__suffix {
			line-height: 24px;
		}
		.table_input .el-input__icon {
			line-height: 24px;
        }
        .table_nums .el-input-number{
            width: 100%;
            height: 24px;
            line-height: 24px;
        }
        .table_nums .el-input-number__decrease, .table_nums .el-input-number__increase {
            height: 22px;
            width: 24px;
            background: #fff;
        }
        .table_nums .el-input__inner {
            height: 24px;
            text-align: center;
            line-height: 24px;
            padding: 0 24px;
        }
	</style>
</html>
